Conversation
kelunik
left a comment
kelunik
left a comment
There was a problem hiding this comment.
We could also add a wrapper <div> with overflow-x: scroll. We should likely also avoid line breaks in the date, but overall this looks fine.
|
Perhaps an approach similar to web-php/supported-versions.php Lines 65 to 66 in 144acf6 diff --git a/eol.php b/eol.php
index 80a843ca..c77b9648 100644
--- a/eol.php
+++ b/eol.php
@@ -20,7 +20,8 @@ $BRANCH_NOTES = array(
'4.4' => '<a href="/migration5">A guide is available for migrating from PHP 4 to PHP 5.0.</a><br>The end of life for PHP 4.4 also marks the end of life for PHP 4 as a whole.',
);
-site_header('Unsupported Branches');
+site_header('Unsupported Branches', array('css' => array('eol.css')));
+
?>
<h1>Unsupported Branches</h1>
@@ -51,8 +52,9 @@ site_header('Unsupported Branches');
<td><?php echo htmlspecialchars($branch); ?></td>
<td>
<?php echo $eolDate->format('j M Y') ?>
- <br/>
- <em>(<?php echo $eolPeriod ?>)</em>
+ </td>
+ <td class="collapse-phone">
+ <em><?php echo $eolPeriod ?></em>
</td>
<td>
<a href="<?php echo htmlspecialchars($detail['link']); ?>">
diff --git a/styles/eol.css b/styles/eol.css
new file mode 100644
index 00000000..b655f03e
--- /dev/null
+++ b/styles/eol.css
@@ -0,0 +1,13 @@
+@media (max-width: 767px) {
+ table.standard th {
+ font-size: 1rem;
+ }
+
+ table.standard td.collapse-phone {
+ padding: 0;
+ }
+
+ table.standard td.collapse-phone * {
+ display: none;
+ }
+} |
|
I like it -- should the common CSS be pulled out so the supported and unsupported versions pages use the same stylesheet ("versions.css"?) for this display logic? |
|
@localheinz @kelunik @cmb69 bumping this one too since #501 just got some attention, still had an outstanding question on refactoring/extracting common CSS |
|
@SteveDesmond-ca, I think we should stick with the current PR for now. There is some big design update in the works (#602), so I'm a bit wary bringing in more CSS than necessary. If there are no objections, I'll merge this by the end of the week. |
|
Thank you! |
4 participants
This PR proposes a fix for #498 by combining the EOL date and period columns, placing the period on a new line below the date and enclosed in parentheses.
The amended layout reduces the page's minimum non-breaking viewport width from 408px to 352px, which should account for the vast majority of modern smartphones (manufactured 2016 or later).